<%--
  Created by IntelliJ IDEA.
  User: Sky
  Date: 2019/4/10
  Time: 11:17
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="${pageContext.request.contextPath}/images/fiveite.ico">

    <title>人流量检测系统</title>
    <style>
        #mytable tr td {
            height: 40px;
            padding-top: 0;
            padding-bottom: 0;
            line-height: 40px;
            text-align: center;
        }
    </style>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/my_animation.css" type="text/css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/components.css" type="text/css"/>
    <link href="https://at.alicdn.com/t/font_1126822_bheq7e6ga8.css" rel="stylesheet">
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" type="text/css"
          href="https://cdn.datatables.net/1.10.18/css/dataTables.bootstrap4.min.css"/>
    <style type="text/css">

    </style>
</head>

<body>

</div>
<div class="modal fade" id="secadd" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
     aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">添加负责人</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text">上传头像</span>
                    </div>
                    <div class="custom-file">
                        <input value="" type="file" class="custom-file-input sect" id="setimg">
                        <label id="la" class="custom-file-label" for="setimg">选择文件</label>
                    </div>
                </div>
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text">姓名</span>
                    </div>
                    <input id="setname" type="text" class="form-control sect" placeholder="姓名"
                           aria-label="Username" aria-describedby="basic-addon1">
                </div>
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text">职务</span>
                    </div>
                    <input id="setaddress" type="text" class="form-control sect" placeholder="职务"
                           aria-label="Username" aria-describedby="basic-addon1">
                </div>
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text">负责区域</span>
                    </div>
                    <input id="setlocation" type="text" class="form-control sect" placeholder="负责区域"
                           aria-label="Username" aria-describedby="basic-addon1">
                </div>
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text">联系方式1</span>
                    </div>
                    <input id="setphone1" type="text" class="form-control sect" placeholder="联系方式2"
                           aria-label="Username" aria-describedby="basic-addon1">
                </div>
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text">联系方式2</span>
                    </div>
                    <input id="setphone2" type="text" class="form-control sect" placeholder="联系方式2"
                           aria-label="Username" aria-describedby="basic-addon1">
                </div>
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text">备注</span>
                    </div>
                    <input id="setmark" type="text" class="form-control sect" placeholder="备注" aria-label="Username"
                           aria-describedby="basic-addon1">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="universalBtn secondary" data-dismiss="modal">放弃</button>
                <button id="savasec" type="button" class="universalBtn primary">保存添加</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="removeSubLocation" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
     aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">删除地点</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-2"></div>
                    <div class="col-8">
                        <label class="dangerLabel">删除地点后不可恢复！</label>
                        <form>
                            <div class="input-group">
                                <select title="选择地点" class="custom-select" id="selectsub">
                                    <option selected>请选择地点</option>
                                </select>
                                <div class="input-group-append">
                                    <button id="removesub" class="btn btn-danger" type="button">删除</button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="col-2"></div>
                </div>
            </div>
            <div class="modal-footer">
                <%--<button type="button" class="universalBtn secondary" data-dismiss="modal">放弃</button>--%>
                <button type="button" class="universalBtn secondary" data-dismiss="modal">退出</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="addSubLocation" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
     aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">新地点</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-2"></div>
                    <div class="col-8">
                        <form>
                            <div class="form-group">
                                <label for="newSublocation" class="col-form-label">请输入地点名(没有更新数据的地点将不会显示在实时统计中)</label>
                                <input type="text" class="form-control" id="newSublocation">
                            </div>
                        </form>
                    </div>
                    <div class="col-2"></div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="universalBtn secondary" data-dismiss="modal">放弃</button>
                <button id="saveadd" type="button" class="universalBtn primary">保存添加</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="operateAcc" tabindex="-1" role="dialog" aria-labelledby="operateAcc" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="operateAccTitle">更换账号</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div id="operateAccBody" class="modal-body">
                <div class="row">
                    <div class="col-8">
                        <div class="accItem nowAcc" id="nowAcc"></div>
                        <div class="accItem addAcc" id="addAcc">
                            <div class="input-group addInput">
                                <div class="input-group-prepend">
                                    <span class="input-group-text iconfont">&#xe634;</span>
                                </div>
                                <input type="text" id="account" class="form-control" onblur="" placeholder="账号"
                                       aria-label="Username" aria-describedby="addon-wrapping">
                            </div>
                            <div class="input-group addInput">
                                <div class="input-group-prepend">
                                    <span class="input-group-text iconfont">&#xe63e;</span>
                                </div>
                                <input type="password" id="password" class="form-control" placeholder="密码"
                                       aria-label="Username" aria-describedby="addon-wrapping">
                            </div>
                        </div>
                    </div>
                    <div class="col-4">
                        <div class="emptyCheckDiv"></div>
                        <div class="accCheck">没有该账号</div>
                        <div class="pwdCheck">密码错误</div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="universalBtn secondary" data-dismiss="modal">取消</button>
                <button type="button" id="change" class="universalBtn primary" disabled>确认更换</button>
            </div>
        </div>
    </div>
</div>
<div id="bg">
    <div id="lg_nav" class="lg_nav hidden-sm fixed-top colorBg">
        <div id="lg_nav_buttom">
            <a href="${pageContext.request.contextPath}/default" class="lg_nav_item">
                <p class="logo unAbleSelect"><i class="iconfont">&#xe630;</i> <span id="logo"
                                                                                    class="logoico">人流量预警云平台</span></p>
            </a>
            <a href="${pageContext.request.contextPath}/realtime" class="lg_nav_item bk_hover">实时预警</a>
            <a href="${pageContext.request.contextPath}/history" class="lg_nav_item bk_hover">历史记录</a>
            <a href="${pageContext.request.contextPath}/admin/handler" id="admin"
               class="lg_nav_item bk_hover adminBtn hide">管理员<label
                    class="">1</label></a>
            <a class="lg_nav_item bk_hover bk_active">设置</a>
            <div id="headerFeild" class="lg_nav_item">
                <div class="headerTop head_hover bk_active">
                    <span id="nickname">正在加载</span>
                </div>
                <div class="accSet colorBg">
                    <ul>

                        <li id="changeAcc">更换账号</li>
                        <li><a href="${pageContext.request.contextPath}/">退出账号</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="default_layout">
        <div class="grad interval"></div>
    </div>
</div>
<div class="m_layout locationSetting_layout">
    <div class="side_layout setting_side">
        <div class="sideFixedFeild unAbleSelect">
            <a href="javascript:void(0)">
                <div class="settingOption optionActive">地点设置</div>
            </a>
            <a href="${pageContext.request.contextPath}/setting/user">
                <div class="settingOption">账号设置</div>
            </a>
        </div>
    </div>
    <div class="main_layout setting_container">
        <div class="securityArchivesFeild">

        </div>
    </div>
    <div class="archivesMessage">
        <div class="mainFixedFeild">
            <div class="blockFeild">请选择一个负责人档案</div>
            <div id="msgFeild" data-msgId="0" class="messageFeild hide">
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text" id="namelabel">姓名</span>
                    </div>
                    <input readonly type="text" id="name" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="namelabel">
                </div><div class="input-group mb-3">
                <div class="input-group-prepend">
                    <span class="input-group-text" id="addresslabel">职务</span>
                </div>
                <input readonly type="text" id="address" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="addresslabel">
            </div><div class="input-group mb-3">
                <div class="input-group-prepend">
                    <span class="input-group-text" id="phone1label">联系方式1</span>
                </div>
                <input readonly type="text" id="phone1" class="form-control" placeholder="联系方式1" aria-label="Username" aria-describedby="phone1label">
            </div><div class="input-group mb-3">
                <div class="input-group-prepend">
                    <span class="input-group-text" id="phone2label">联系方式2</span>
                </div>
                <input readonly type="text" id="phone2" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="phone2label">
            </div><div class="input-group">
                <div class="input-group-prepend">
                    <span class="input-group-text">备注</span>
                </div>
                <textarea title="备注" readonly id="mark" class="form-control" aria-label="With textarea"></textarea>
            </div>
                <div class="messagelocationFeild">
                    <h5>负责地点</h5>
                    <button class="universalBtn primary addSubLocation" data-toggle="modal"
                            data-target="#addSubLocation">添加地点 <i class="iconfont">&#xe609;</i></button>
                    <button class="universalBtn danger removeSubLocation" data-toggle="modal"
                            data-target="#removeSubLocation">删除地点 <i class="iconfont">&#xe792;</i></button>
                    <div class="subLocationSpanFeild">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
        crossorigin="anonymous"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous" async></script>
<script type="text/javascript" charset="utf8"
        src="https://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.18/js/dataTables.bootstrap4.min.js"></script>
<script src="${pageContext.request.contextPath}/js/jQuery.md5.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/js/jquery.cookie.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/js/public.js" type="text/javascript"></script>
<script type="text/javascript">
    let setname = "";
    let setimg = "";
    let setaddress = "";
    let setphone1 = "";
    let setphone2 = "";
    let setmark = "";
    let setlocation="";
    let controlshow = false;
    let securitryData = [];
    let tempLocation = [];
    $(document).ready(function () {
        const img = $("img");
        cookiesAuth();
        img.one("error", function (e) {
            $(this).attr("src", "");
        });
        const getAllSecrity=function () {
            $.miniAjax("${pageContext.request.contextPath}/api/allSecurity", function (data) {
                securitryData = data;
                let html = "";
                for (let item of data) {
                    html += "<div class='Archives'>\n" +
                        "                <div class='archivesMask'>\n" +
                        "                    <div data-archives=" + item.locationkey + " class='outlineBtn'>修改</div>\n" +
                        "                </div>\n" +
                        "                <div class='archivesItem securityPic'>\n" +
                        "                    <img src='"+item.secimg+"' width='100%' height='100%'  class='rounded-circle pic'\n" + "alt='负责人'/>\n" +
                        "                </div>\n" +
                        "                <div title='' class='archivesItem securityAddress'>\n" +
                        "                    <div class='addressFeild'>" + item.address + "</div>\n" +
                        "                </div>\n" +
                        "                <div class='archivesItem securityName'>" + item.security + "</div>\n" +
                        "            </div>";
                }
                html += "<div class='Archives add unAbleSelect' data-toggle='modal' data-target='#secadd'><i class='iconfont addicon'>&#xe62c;</i> </div>";
                $(".securityArchivesFeild").html(html);
            })
        };
        getAllSecrity();
        $(".modifiedLabel").on("click", function () {
            let Input = $(".securityInput");
            if (Input.attr("readonly") === "readonly") {
                Input.removeAttr("readonly");
                $("#modified").addClass("modifiedShow");
            } else {
                Input.attr("readonly", "readonly");
                $("#modified").removeClass("modifiedShow");
            }
        });

        $(document).on("click", ".outlineBtn", function () {
            const messageFeild = $(".messageFeild");//档案对象
            const msgid = messageFeild.attr("data-msgId");  //档案对应的key
            const archiveskey = $(this).attr("data-archives");//按钮对应的key
            if (controlshow) {
                if (archiveskey === msgid) {
                    messageFeild.removeClass("show").addClass("hide");
                    controlshow = false;
                }
            } else {
                messageFeild.removeClass("hide").addClass("show");
                controlshow = true;
            }
            for (let item of securitryData) {
                if (parseInt($(this).attr("data-archives"), 10) === item.locationkey) {
                    $("#name").val(item.security);
                    $("#address").val(item.address);
                    $("#phone1").val(item.phone1);
                    $("#phone2").val(item.phone2);
                    $("#mark").val(item.mark);
                }
            }
            getSub(archiveskey);
            messageFeild.attr("data-msgId", archiveskey);
        });
        $("#saveadd").on("click", function () {
            const msgid = $(".messageFeild").attr("data-msgId");  //档案对应的key
            const newSublocation = $("#newSublocation").val();
            $.liteAjax("${pageContext.request.contextPath}/api/addNewSublocation", {
                newsublocation: newSublocation, locationkey: msgid
            }, function (data) {
                if (data === 1) {
                    message("添加成功", 1000, "alert-success");
                    getSub(msgid);
                } else if (data === 0) {
                    message("该地点已存在！", 1000, "alert-warning")
                } else {
                    message("添加失败！", 2000, "alert-danger")
                }
            })
        });

        function getSub(archiveskey) {
            $.liteAjax("${pageContext.request.contextPath}/api/queryAllSubBykey", {
                locationkey: archiveskey
            }, function (data) {
                tempLocation = data;
                let location = "";
                for (let item of data) {
                    location += "<span class='sublocationSpan'>" + item + "</span>"
                }
                $(".subLocationSpanFeild").html(location);
            });
        }

        function appendSubLocation(data) {
            let optionsub = "<option selected>请选择地点</option>";
            for (let sub of data) {
                optionsub += "<option value='" + sub + "'>" + sub + "</option>"
            }
            $("#selectsub").html(optionsub);
        }

        $(".removeSubLocation").on("click", function () {
            appendSubLocation(tempLocation);
        });
        $("#removesub").on("click", function () {
            $.liteAjax("${pageContext.request.contextPath}/api/delectSubBySub", {
                sublocation: $("#selectsub").val()
            }, function (data) {
                if (data === 1) {
                    message("地点已删除", 1000, "alert-success");
                    getSub($(".messageFeild").attr("data-msgId"));
                    appendSubLocation(tempLocation);
                } else {
                    message("删除失败", 2000, "alert-warning")
                }
            })
        });
        $("#setimg").on("change", function () {
            let file = this.files[0];
            // 确认选择的文件是图片
            let imgsize = file.size / 1024;
            if (imgsize > 500) {
                message("文件必须小于500K", 1000, "alert-warning")
            } else {
                if (file.type.indexOf("image") === 0) {
                    $("#la").html(file.name);
                    let reader = new FileReader();
                    reader.readAsDataURL(file);
                    reader.onload = function (e) {
                        setimg = this.result;
                    };
                } else {
                    message("请选择图片！", 1000, "alert-danger")
                }
            }
        });
        $(".sect").on("blur", function () {
            setname = $("#setname").val();
            setaddress = $("#setaddress").val();
            setmark = $("#setmark").val();
            setphone1 = $("#setphone1").val();
            setphone2 = $("#setphone2").val();
            setlocation=$("#setlocation").val();
            console.log(setname + setaddress + setmark + setphone1 + setphone2+setimg);
        });
        $("#savasec").on("click",function () {
            $.liteAjax("${pageContext.request.contextPath}/api/addSec",{
                address:setaddress,
                location:setlocation,
                secimg:setimg,
                phone1:setphone1,
                phone2:setphone2,
                mark:setmark,
                security: setname
            },function (data) {
                if(data===1){
                    message("添加成功，您可以添加地点了",2000,"alert-success");
                    getAllSecrity();
                }else {
                    message("添加失败",2000,"alert-warning")
                }
            })
        });

    });
</script>
</body>
</html>